<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html {
            background: -webkit-radial-gradient(center, ellipse, #ef0e39 0%, #000 100%);
            background: radial-gradient(ellipse at center, #ef0e39 0%, #000 100%);
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="bg"></div>
</body>
</html>

<script>
    var pointsDuration = 10000;
    var pointsTimeout;
    var unitSize;
    var numPointsX;
    var numPointsY;
    var unitWidth;
    var unitHeight;
    var pointsArray;
    var splines = '0.5 0.5 0.5 0.5';
    var times = '0;1';

    window.onload = onLoad;
    window.onresize = onResize;

    function onLoad() {
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        var svgNS = svg.namespaceURI;
        svg.setAttribute('width', window.innerWidth);
        svg.setAttribute('height', window.innerHeight);
        document.querySelector('#bg').appendChild(svg);
        unitSize = (window.innerWidth + window.innerHeight) / 20;
        numPointsX = Math.ceil(window.innerWidth / unitSize) + 1;
        numPointsY = Math.ceil(window.innerHeight / unitSize) + 1;
        unitWidth = Math.ceil(window.innerWidth / (numPointsX - 1));
        unitHeight = Math.ceil(window.innerHeight / (numPointsY - 1));
        pointsArray = [];
        for (var y = 0; y < numPointsY; y++) {
            for (var x = 0; x < numPointsX; x++) {
                var newX = unitWidth * x;
                var newY = unitHeight * y;
                pointsArray.push({
                    x: newX,
                    y: newY,
                    trueX: newX,
                    trueY: newY
                });
            }
        }
        randomizePoints();
        for (var i = 0; i < pointsArray.length; i++) {
            if (pointsArray[i].trueX != unitWidth * (numPointsX - 1) && pointsArray[i].trueY != unitHeight * (numPointsY - 1)) {
                var topLeftX = pointsArray[i].x;
                var topLeftY = pointsArray[i].y;
                var topRightX = pointsArray[i + 1].x;
                var topRightY = pointsArray[i + 1].y;
                var bottomLeftX = pointsArray[i + numPointsX].x;
                var bottomLeftY = pointsArray[i + numPointsX].y;
                var bottomRightX = pointsArray[i + numPointsX + 1].x;
                var bottomRightY = pointsArray[i + numPointsX + 1].y;
                var rando = Math.floor(Math.random() * 2);
                for (var n = 0; n < 2; n++) {
                    var polygon = document.createElementNS(svgNS, 'polygon');
                    if (rando == 0) {
                        if (n == 0) {
                            polygon.point1 = i;
                            polygon.point2 = i + numPointsX;
                            polygon.point3 = i + numPointsX + 1;
                            polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + bottomLeftX + ',' + bottomLeftY + ' ' + bottomRightX + ',' + bottomRightY);
                        } else if (n == 1) {
                            polygon.point1 = i;
                            polygon.point2 = i + 1;
                            polygon.point3 = i + numPointsX + 1;
                            polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + topRightX + ',' + topRightY + ' ' + bottomRightX + ',' + bottomRightY);
                        }
                    } else if (rando == 1) {
                        if (n == 0) {
                            polygon.point1 = i;
                            polygon.point2 = i + numPointsX;
                            polygon.point3 = i + 1;
                            polygon.setAttribute('points', topLeftX + ',' + topLeftY + ' ' + bottomLeftX + ',' + bottomLeftY + ' ' + topRightX + ',' + topRightY);
                        } else if (n == 1) {
                            polygon.point1 = i + numPointsX;
                            polygon.point2 = i + 1;
                            polygon.point3 = i + numPointsX + 1;
                            polygon.setAttribute('points', bottomLeftX + ',' + bottomLeftY + ' ' + topRightX + ',' + topRightY + ' ' + bottomRightX + ',' + bottomRightY);
                        }
                    }
                    polygon.setAttribute('fill', 'rgba(0,0,0,' + (Math.random() / 3) + ')');
                    var animatePoints = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
                    animatePoints.setAttribute('fill', 'freeze');
                    animatePoints.setAttribute('attributeName', 'points');
                    animatePoints.setAttribute('dur', pointsDuration + 'ms');
                    animatePoints.setAttribute('keySplines', splines);
                    animatePoints.setAttribute('keyTimes', times);
                    animatePoints.setAttribute('calcMode', 'spline');
                    polygon.appendChild(animatePoints);
                    svg.appendChild(polygon);
                }
            }
        }
        onPointsInterval();
    }

    function randomizePoints() {
        for (var i = 0; i < pointsArray.length; i++) {
            if (pointsArray[i].trueX != 0 && pointsArray[i].trueX != unitWidth * (numPointsX - 1)) {
                pointsArray[i].x = pointsArray[i].trueX + Math.random() * unitWidth - unitWidth / 2;
            }
            if (pointsArray[i].trueY != 0 && pointsArray[i].trueY != unitHeight * (numPointsY - 1)) {
                pointsArray[i].y = pointsArray[i].trueY + Math.random() * unitHeight - unitHeight / 2;
            }
        }
    }

    function onPointsInterval() {
        randomizePoints();
        for (var i = 0; i < document.querySelector('#bg svg').childNodes.length; i++) {
            var polygon = document.querySelector('#bg svg').childNodes[i];
            var animate = polygon.childNodes[0];
            if (animate.getAttribute('to')) {
                animate.setAttribute('from', animate.getAttribute('to'));
            }
            animate.setAttribute('to', pointsArray[polygon.point1].x + ',' + pointsArray[polygon.point1].y + ' ' + pointsArray[polygon.point2].x + ',' + pointsArray[polygon.point2].y + ' ' + pointsArray[polygon.point3].x + ',' + pointsArray[polygon.point3].y);
            animate.beginElement();
        }
        pointsTimeout = setTimeout(function() {
            onPointsInterval();
        }, pointsDuration);
    }

    function onResize() {
        while (document.getElementById("polygonContainer").hasChildNodes()) {
            document.getElementById("polygonContainer").removeChild(document.getElementById("polygonContainer").lastChild);
        }
        clearTimeout(pointsTimeout);
        onLoad();
    }
</script>